@nav-height: 44px; // 导航栏高度
@status-bar-height: env(safe-area-inset-top); // 状态栏高度（适配刘海屏）

.custom-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background-color: var(--color-primary); // 背景色
  border-bottom: 1px solid #eaeaea;

  .status-bar {
    height: @status-bar-height;
    background-color: var(--color-primary); // 状态栏背景色
  }

  .nav-bar {
    height: @nav-height;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;

    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      flex: 1;
      text-align: center;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .left,
    .right {
      width: 50px; // 按钮区域宽度
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn {
      font-size: 14px;
      color: #007aff;
    }
  }
}
